<!--
 * @Author: hpc(hepch)
 * @Date: 2021-06-15 10:32:06
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-09-09 17:03:44
 * @Description:地图工具条
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->
<template>
  <div id="maptools">
    <div class="tools-items">
      <a-button-group>
        <!-- <a-button @click="handleClick('searchAttribute')" v-if="false">
          <icon-font type="icon-shuxing1" />属性
        </a-button> -->
        <a-button @click="handleClick('searchStakeNo')">
          <icon-font type="icon-baimizhuang" />桩号
        </a-button>
        <a-button @click="handleClick('measure')">
          <icon-font type="icon-celiang" />测量
        </a-button>
        <a-button @click="handleClick('multiDateImg')">
          <icon-font type="icon-duoshixiang" />多时相
        </a-button>
        <a-button @click="handleClick('xyto')">
          <a-icon type="environment" />坐标定位
        </a-button>
        <a-button @click="handleClick('bookmark')">
          <icon-font type="icon-Bookmark" />书签
        </a-button>
        <a-button @click="handleClick('mark')">
          <a-icon type="edit" />标注
        </a-button>
        <a-button @click="handleClick('clearLayers')"
          ><a-icon type="delete" />清除</a-button
        >
      </a-button-group>
    </div>
    <div class="tool-details" v-show="hasTool">
      <multi-date-img v-if="isMultiDateImg" />
      <XYto v-if="isXYto" :map-xyz="xyz" />
      <SearchStakes v-if="isSearchStake" />
      <book-mark v-if="isBookMark" />
      <query-tools v-if="isSearchAttribute && this.checkedLayers.length" />
      <a-button-group class="measureTools" v-if="isMeasureTools">
        <a-button type="link" @click="disM">
          <icon-font type="icon-juliceliang" />测距
        </a-button>
        <a-button type="link" @click="disA">
          <icon-font type="icon-mianji" />测面
        </a-button>
      </a-button-group>
    </div>
    <Mark ref="Mark" v-if="isMark" />
  </div>
</template>

<script>
import XYto from "./XYto";
//import L from "leaflet"
import { Icon } from "ant-design-vue";
import Mark from "./Mark.vue";
import SearchStakes from "./SearchStakes";
import MultiDateImg from "./MultiDateImg.vue";
import { hideBottomPanel } from "../../utils/divResize.js";
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: "./iconfont/iconfont.js",
});
import QueryTools from "./queryTools.vue";
import BookMark from "./BookMark.vue";

export default {
  data() {
    return {
      isXYto: false,
      isMeaure: false,
      current: [],
      hasTool: true,
      xyz: {},
      isSearchStake: false,
      isMultiDateImg: false,
      isSearchAttribute: false,
      isMeasureTools: false,
      isMark: false,
      isBookMark: false,
    };
  },
  computed: {
    map() {
      return this.$store.state.map;
    },
    markelabelGroup() {
      return this.$store.state.markelabelGroup;
    },
    MultiLayerGroup() {
      return this.$store.state.MultiLayerGroup;
    },
    checkedLayers() {
      return this.$store.state.checkedLayers;
    },
  },
  components: {
    XYto,
    IconFont,
    Mark,
    SearchStakes,
    MultiDateImg,
    QueryTools,
    BookMark,
  },
  methods: {
    handleClick(key) {
      if (key == "searchAttribute") {
        if (!this.checkedLayers.length) {
          this.$message.info("未选择图层");
          return;
        }
        this.isSearchAttribute
          ? this.openQTools()
          : (this.closeAll(), this.openQTools());
      } else if (key == "xyto") {
        //  this.hasTool = true;
        this.isXYto ? this.showXYto() : (this.closeAll(), this.showXYto());
      } else if (key == "measure") {
        this.isMeasureTools
          ? (this.isMeasureTools = false)
          : (this.closeAll(), (this.isMeasureTools = true));
      } else if (key == "bookmark") {
        this.isBookMark
          ? (this.isBookMark = false)
          : (this.closeAll(), (this.isBookMark = true));
      } else if (key == "mark") {
        this.isMark ? this.mark() : (this.closeAll(), this.mark());
      } else if (key == "clear") {
        this.closeAll();
        this.clearAllLayers();
      } else if (key == "clearLayers") {
        this.closeAll();
        this.clearAllLayers();
      } else if (key === "searchStakeNo") {
        this.closeAll();
        this.showSearchStake();
      } else if (key == "multiDateImg") {
        this.isMultiDateImg
          ? this.showMultiDateImg()
          : (this.closeAll(), this.showMultiDateImg());
      }
    },
    mark() {
      this.map.off("click");
      let div = document.getElementsByClassName(
        "leaflet-popup-close-button"
      )[0];
      if (div) div.click();
      this.isMark = !this.isMark;
      if (!this.isMark) {
        this.markelabelGroup.clearLayers();
        return;
      }
      let self = this;
      this.$message.info("单击地图左键，添加标记，保存前可按住拖动标注");
      this.map.on("click", function (e) {
        self.$refs.Mark.addmarkerToMap(e.latlng);
      });
    },
    disM: function () {
      window.handler.disable();
      // this.map.on("contextmenu", function (e) {
      //   document.getElementsByClassName(
      //     "leaflet-contextmenu"
      //   )[1].style.display = "none";
      // });
      // this.map.contextmenu.disable();
      this.map._distControl.addHooks();
    },
    disA: function () {
      window.handler.disable();
      // this.map.on("contextmenu", function (e) {
      //   document.getElementsByClassName(
      //     "leaflet-contextmenu"
      //   )[1].style.display = "none";
      // });
      this.map._areaControl._onMouseClick();
    },
    showMultiDateImg() {
      this.MultiLayerGroup.clearLayers();
      this.isMultiDateImg = !this.isMultiDateImg;
    },
    openQTools() {
      this.isSearchAttribute = !this.isSearchAttribute;
    },
    clear() {
      //清除测量
      let map = this.map;
      console.log(map);
      if (map._distControl._currentDist) {
        for (let i = 0; i < map._distControl._currentDist._layers.length; i++) {
          map.removeLayer(map._distControl._currentDist._layers[i]);
        }
      }
      if (map._areaControl._compute) {
        for (let i = 0; i < map._areaControl._compute._layers.length; i++) {
          map.removeLayer(map._areaControl._compute._layers[i]);
        }
      }
      this.markelabelGroup.clearLayers();
    },
    closeAll() {
      this.isMark = false;
      this.isXYto = false;
      this.isSearchStake = false;
      // this.isMultiDateImg = false;
      this.isMeasureTools = false;
      this.isSearchAttribute = false;
      this.isBookMark = false;
      //this.MultiLayerGroup.clearLayers();
      this.map.off("click");
    },
    //open searchstake component plane
    showSearchStake() {
      this.isSearchStake = true;
    },
    // 打开坐标定位菜单
    showXYto() {
      this.isXYto = !this.isXYto;
      if (this.isXYto) {
        this.xyz.center = [28.111, 112.971];
        this.xyz.zoom = 17;
      }
    },
    clearAllLayers() {
      // this.$eventBus.$emit("clearAlldata", "");
      let state = this.$store.state;
      this.clear();
      for (let key in state) {
        if (
          key != "map" &&
          key != "baseLayerGroup" &&
          key != "veccvaLayerGroup" &&
          key != "imgciaLayerGroup"
        )
          if (state[key] && state[key]._layers) {
            state[key].clearLayers();
          }
        this.$store.commit("setCheckedLayers", []);
        hideBottomPanel();
        this.$eventBus.$emit("clearAlldata", "");
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-btn {
  padding: 0 5px !important;
}
#maptools {
  right: 360px;
  position: absolute;
  top: 26px;
  float: right;
  z-index: 99;

  .tool-details {
    margin-top: 10px;
    width: 60%;

    margin-right: 10px;
    .measureTools {
      height: 40px;
      width: 180px;
      bottom: 0;
      text-align: center;
      margin-left: 0px;
      padding: 0;
      background-color: white;
      border-radius: 2px;
      border: 1px solid #e8e8e8;
      .tools-title {
        line-height: 40px !important;
        font-size: 14px !important;
      }
      i {
        line-height: 40px !important;
        font-size: 20px !important;
      }
    }
  }
  .ant-menu-horizontal {
    line-height: 38px;
  }
}
</style>
